import { useEffect, useState, use, Suspense } from 'react'
import './style.less'
import { Button, Table } from 'antd'

const fetchData = async () => {
  return fetch('https://api.cenguigui.cn/api/music/qianqian_music.php?msg=张杰&n=1')
    .then((response) => {
      // 检查响应状态
      if (!response.ok) {
        throw new Error('Network response was not ok: ' + response.statusText)
      }
      // 返回一个解析后的 JSON 对象
      return response.json()
    })
    .then((res) => {
      // 在这里处理解析后的数据
      console.log(res)
      return res
    })
    .catch((error) => {
      // 捕获并处理请求或响应中的错误
      console.error('There has been a problem with your fetch operation:', error)
      return error
    })
}
const DataFetchingComponent = () => {
  // 使用 use Hook 进行数据获取
  const data = use(fetchData())

  return (
    <div>
      <h1>数据:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

const TablePage: React.FC = () => {
  const [dataSource, setDataSource] = useState([])
  const columns = [
    {
      title: '表编码',
      dataIndex: 'uni_code'
    },
    {
      title: '表名（中文）',
      dataIndex: 'name'
    },
    {
      title: '描述',
      dataIndex: 'description'
    }
  ]

  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Button type="primary">reset Button</Button>
      <DataFetchingComponent />
    </Suspense>
  )
}

export default TablePage
